<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>甜甜圈</title>
</head>
<style>
  .main {
    width: 400px;
    margin: 40px auto 0;
  }
</style>

<body>
  <div class="main">
    <svg width="124" height="124" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="62" cy="62" r="58" stroke="#eee" stroke-width="5" />
      <!-- 周长：2*3.148*58=364.24 -->
      <circle stroke="green" stroke-width="5" stroke-linecap="round" stroke-dasharray="364.24" stroke-dashoffset="100"
        style="transform-origin: center;transform:rotate(270deg)" cx="62" cy="62" r="58" />
    </svg>
  </div>
</body>

</html>